<template>
  <div>
    <!-- testing/Inf.vue -->
    <div v-infinite-scroll="loadMore"
         infinite-scroll-distance="100">
      <p class="item" v-for="i in n" :key="i">
        段落内容 -- {{i}}
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n : 10,
      isLoading: false   // 代表数据是否正在加载中
    }
  },
  methods: {
    loadMore(){
      if(this.isLoading){   
        return
      }
      
      this.isLoading = true
      console.log('到底了！!!!')
      window.setTimeout(()=>{
        this.n += 20
        this.isLoading = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
  .item {  margin: 0px 10px;
    height: 45px; line-height: 45px;
    text-align: center; border-bottom: 1px solid black;
  }
</style>
